import { Component } from "react";
import { AtIcon, AtDrawer } from "taro-ui";
import { View } from "@tarojs/components"

import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/flex.scss";
import "taro-ui/dist/style/components/drawer.scss";
import "taro-ui/dist/style/components/list.scss";
export default class CustomBell extends Component{

    constructor(){
        super(...arguments)
        this.state = {
            // 是否显示消息抽屉
            showDrawer: false
        }
    }


    /**
     * 点击消息按钮事件
     */
    onClick = () => {
        this.setState({
            showDrawer: true
        })
    }

    /**
     * 关闭抽屉
     */
    onClose = () => {
        this.setState({
            showDrawer: false
        })
    }

    render(){
        const { showDrawer } = this.state;
        return (
            <View className='at-row'>
                <View >
                    <AtIcon value='camera' size='30' color='#F0000'></AtIcon>
                </View>
                <View >
                    <AtIcon value='bell' size='30' color='#F0000' onClick={this.onClick.bind(this)}></AtIcon>
                </View>
                <View>
                <AtDrawer 
                    show={showDrawer} 
                    right 
                    mask 
                    onClose={this.onClose.bind(this)} 
                    items={['账户通知', '交易物流', '互动消息']}
                    ></AtDrawer>
                </View>
            </View>
        )
    }
}
